<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>vue-列表渲染</title>
		<script src="../js/vue.js"></script>
		<style>
			
		</style>
	</head>

	<body>

		<div class="test-06">
			<li v-for="item of items">{{item.message}}</li>
			
			<li v-for="(item,index) of items">{{sender}}{{index}}--{{item.message}}</li>
			<button onclick="upData()">修改消息2内容</button>
			
			<ul v-for="oo in o">对象名：{{oo.name}}
				<li v-for="ooo of oo.sub">对象消息：{{ooo.message}}</li>
			</ul>
			
			<ul v-for="(oo,key) in o">对象键：{{key}}--对象名：{{oo.name}}
				<li v-for="(ooo,key) of oo.sub">对象数组键：{{key}}--对象消息：{{ooo.message}}</li>
			</ul>
			
			<ul v-for="(oo,key,index) in o">对象序号：{{index}}--对象键：{{key}}--对象名：{{oo.name}}
				<li v-for="(ooo,key) of oo.sub">
					对象数组键：{{key}}--对象消息：{{ooo.message}}
				</li>
			</ul>
			
			<li v-for="arr of array_">{{arr}}</li>
			<button @click="upData2">修改第二个</button>
			<button @click="upData3">修改第三个</button>
			<button @click="upData4">修改第四个</button>
			
			<li v-for="(obj,key) in obj_">{{key}}: --{{obj}}</li>
			<button @click="add_obj">增加对象c</button>
			<button @click="up_obj">修改对象a</button>
			<button @click="cls_obj">清除对象b</button>
			
			<br/>
			<b>原数据:</b>
			<b v-for="n of array_num"> {{n}} </b>
			<br />
			<b>显示过滤/排序结果:</b>
			<b v-for="n of evenNumbers"> {{n}} </b>
			<br/>
			<b>显示过滤/排序结果:</b>
			<b v-for="n of oodNumbers(array_num)"> {{n}} </b>
			<br/>
			<b>整数值范围内迭代</b>
			<b v-for="n of 6"> {{n}} </b>
			
			<ul>带有 v-if 和v-for:
				<li v-for="(o,key) in obj_" v-if="key != 'obj_b'">{{o}}</li>
				
				<li v-if="items.length">
					<p v-for="obj in items"> {{obj.message}} </p>
				</li>
				<li v-else>没有</li>
			</ul>
		</div>

		<script>
			var test = {
				array_: ['a','b','c','d'],
				array_num: [1,2,3,4,5,6,7,8,9,0],
				obj_: {obj_a:'对象_a',obj_b: '对象_b',obj_d: '对象_d'},
				sender: "发送者：",
				items: [
					{message: "消息1"},
					{message: "消息2"}
				],
				o: {
					obj1: {
						name: "对象1",
						sub :[{message: "对象1消息1"},{message: "对象1消息2"}]
						},
					obj2: {
						name: "对象2",
						sub :[{message: "对象2消息1"},{message: "对象2消息2"}]
						},
					obj3: {
						name: "对象3",
						sub :[{message: "对象3消息1"},{message: "对象3消息2"}]
						},
				}
			}
			var vm = new Vue({
				el: ".test-06",
				data: test,
				methods: {
					upData3: function() {
						//Vue.set(vm.items, indexOfItem, newValue)
						Vue.set(vm.array_,2,"改了3");
					},
					upData2: function() {
						//vm.items.splice(indexOfItem, 1, newValue)
						vm.array_.splice(1, 1, "改了2");
					},
					upData4: function() {
						//vm.$set(vm.items, indexOfItem, newValue)
						vm.$set(this.array_,3,"改了4")
					},
					add_obj: function() {
						vm.$set(vm.obj_, 'obj_c', "对象_c")
					},
					up_obj: function() {
						vm.$set(vm.obj_, 'obj_a', "修改_a")
					},
					cls_obj: function() {
						Vue.set(vm.obj_, 'obj_b', '')
					},
					oodNumbers: function(numbers) {
						return numbers.filter(function(num) {
							return num % 2 !== 0;
						});
					}
				},
				//计算属性computed
				computed: {
					evenNumbers: function() {
						return this.array_num.filter(function(num) {
							return num % 2 === 0;
						});
					}
				},
				//侦听属性watch
				watch: {

				}
			});
			function upData() {
				Vue.set(vm.items[1],'message',"改了消息2");
			}
		</script>
	</body>

</html>